import React,{ Component } from 'react'
import './index.scss'
import { List,Stepper,Button } from 'antd-mobile'

export default class Details extends Component{
    constructor(props){
        super(props)

        this.state={
            num:1
        }
    }

    onChange = (val) => {
        // console.log(val);
        this.setState({ 
            num:val
        });
      }

    render(){
        const { id,comment,img,price,sall,quan_jine,name,miaoshu } = this.props.location.state
        return(
            <div className="container">
                <div className="img-box"><img src={ img } alt=''/></div>
                <div className="goods">
                    <h3>{ name }</h3>
                    <p className="price">券后价<span>￥{ price }</span></p>
                    <p className="yuanjia">原价&nbsp; ￥{ quan_jine }</p>
                    <p className="sall">已售<span> { sall } </span>件</p>
                    <List>
                        <List.Item
                            wrap
                            extra={
                                <Stepper
                                style={{ width: '100%', minWidth: '100px' }}
                                showNumber
                                max={1000}
                                min={1}
                                value={this.state.num}
                                onChange={this.onChange}
                                />}
                            ></List.Item>
                    </List>
                    <div className="button">
                    <Button type="primary" style={{ background:'#FF9500' ,width:'1.25rem',height:'.47rem',fontSize:'.18rem',verticalAlign:'middle',lineHeight:'.47rem'}}>加入购物车</Button>
                    <Button type="primary" style={{ background:'#FF0036',width:'1.25rem',height:'.47rem',fontSize:'.18rem',verticalAlign:'middle',lineHeight:'.47rem'}}>立即购买</Button>
                    </div>
                </div>
                <p className="details">{ miaoshu }</p>
            </div>
        )
    }
}